<template>
	<view class="gusslike">
		<view class="single" v-for="i in likelist" :key="i.id" @click="goShop(i)">
			<image :src="i.cover" class="shop_img"></image>
			<view class="names">
				{{i.name}}
			</view>
			<view class="price">
				拼购价:
				<text class="selling_price">￥{{i.selling_price}}</text>
			</view>
			<view class="hots">
				<text>热销:{{i.hot_sale}}</text>
				<text class="people">满员：{{i.joinNumber}}/{{i.people_number}}人</text>
			</view>

			<view class="redpacket">
				未购中分
				<text class="packet">{{i.total_red_packet}}</text>
				元红包
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gusslike",
		props: {
			likelist: {
				type: Array,
				value: []
			}
		},
		data() {
			return {

			}
		},
		methods: {
			goShop(i) {
				uni.navigateTo({
					url: `/pages/shopping/commodity/detail/index?id=${encodeURIComponent(i.id)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../pages/my/my.scss";

	.gusslike {
		@include flexLayout(center, space-between);
		flex-wrap: wrap;
		padding: 30rpx;

		.single {
			width: 48%;
			margin-bottom: 30rpx;

			.shop_img {
				width: 100%;
				height: 264rpx;
				border-radius: 24rpx 24rpx 0px 0px;
			}

			.names {
				line-height: 50rpx;
				margin-top: 6rpx;
				@include exceedFlow(1);
				color: #0B0B0D;
				font-size: 28rpx;
			}

			.price {
				line-height: 50rpx;
				font-size: 24rpx;
				color: #6F6F6F;

				.selling_price {
					font-size: 30rpx;
					color: #F54642;
					font-weight: 500;
				}
			}

			.hots {
				line-height: 50rpx;
				color: #6F6F6F;
				font-size: 24rpx;
				@include flexLayout(center, space-between);

				.people {
					color: #8B8C8D;
					font-size: 24rpx;
				}
			}

			.redpacket {
				height: 64rpx;
				line-height: 64rpx;
				background: #F54642;
				border-radius: 0px 0px 24rpx 24rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				margin-top: 6rpx;

				.packet {
					font-size: 32rpx;
					margin: 0 10rpx;
				}
			}
		}

		.single:nth-child(even) {
			margin-left: 4%;
		}
	}
</style>
